<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>


<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
    <script>
        (adsbygoogle = window.adsbygoogle || []).push({
            google_ad_client: "ca-pub-4494670471583112",
            enable_page_level_ads: true
        });
    </script>
    <meta name="baidu_union_verify" content="03d61324572350b59ebe19f885fdeb20">
    <title>
        河对面 - 科技领域创业信息服务
    </title>
</head>
<style>
    .section .more {
        display: none;
    }

    h3 {
        text-align: center;
        margin: 20px;
    }

    .period {
        text-align: right;
    }

    .period span {
        margin: 10px;
    }
</style>
<body>
<jsp:include page="common/header.jsp"/>

<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
<h3>热点指数</h3>
<div class="period" style="width:80%;">
    <select onchange="changePeriod(this.value)" >
    <option value="365" >一年</option>
    <option  value="30" >一月</option>
    <option value="7">一周</option>
    <option value="1" selected = "selected">今天</option>
</select></div>
<div id="echarts_news" style="width:90%;height:380px;"></div>
<h3>热点趋势</h3>
<div class="period" style="width:80%;">
    <input type="text" style="width: 75px" onchange="hotWordTrend(this.value)"  />
</div>
<div id="echarts_news_trend" style="width:90%;height:380px;"></div>
</body>
<jsp:include page="common/footer.jsp"/>
</body>
</html>
<script  src="static/js/echarts.common.min.js" ></script>
<script>
    var searchTxt = "${fullTextSearchValue}";
    var orderProperty = "${orderProperty}";
    if (orderProperty == "") {
        orderProperty = "release_time";
    }
    $("#searchTxt").val(searchTxt);

    $("#searchButton").click(function () {
        searchTxt = $("#searchTxt").val();
        location = '/articles?orderProperty=' + orderProperty + '&fullTextMatchValue=' + searchTxt;
    });

</script>
<script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    var echarts_news = echarts.init(document.getElementById('echarts_news'));
    function changePeriod(val) {
    // 指定图表的配置项和数据
    var option = {

        xAxis: {
            data: []
        },
        yAxis: {},
        series: [{
            type: 'bar',
            data: [],
            label: {
                normal: {
                    show: true,
                    position: 'top',
                    formatter: '{c}℃',
                    color: "#ccc",
                }
            }
        }]
    };
    $.get("participleIndex/getHotWordList?period="+val, function (data) {
        var list = data.body;
        list = list.splice(0, 8);
        for (var i in list) {
            option.xAxis.data.push(list[i].word);
            option.series[0].data.push(list[i].num);
        }
        echarts_news.setOption(option);
    });

    }
    changePeriod(1);
    echarts_news.on('click', function (params) {
        var name = params.name;
        searchTxt = name;
        location = '/articles?orderProperty=' + orderProperty + '&fullTextMatchValue=' + searchTxt;
    });
</script>
<script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    var echarts_news_trend = echarts.init(document.getElementById('echarts_news_trend'));


    function hotWordTrend(val) {
        // 指定图表的配置项和数据
        var echarts_news_trend_option = {
            legend: {
                data: []
            },
            xAxis: {
                data: []
            },
            yAxis: {},
            series: []
        };
    $.get("participleIndex/getHotWordTrendList?word="+val, function (data) {
        echarts_news_trend.setOption(echarts_news_trend_option,true);
        var list = data.body;
        list = list.splice(0, 5);
        var li1 = list[0];
        var limit = 9;
        for (var i in li1) {
            if (i > limit) {
                break;
            }
            echarts_news_trend_option.xAxis.data.push(list[0][i].day);
        }
        echarts_news_trend_option.xAxis.data.reverse();
        for (var i in list) {
            echarts_news_trend_option.legend.data.push(list[i][0].word);
            var item = {
                name: list[i][0].word,
                type: 'line',
                data: [],
                label: {
                    normal: {
                        show: false
                    }
                }
            };
            if(i==0){
                item.label.normal.show=true;
            }
            for (var j in list[i]) {
                if (j > limit) {
                    break;
                }
                item.data.push(list[i][j].num);
            }
            item.data.reverse();
            echarts_news_trend_option.series.push(item);
        }
        echarts_news_trend.setOption(echarts_news_trend_option,true);
    });

    }
    hotWordTrend("");
</script>